<template>
    <div class="title">
        <div class="top">
            <span></span>
        </div>
        <h4>{{ title }}</h4>
        <h4 v-if="title1">{{ title1 }}</h4>
        <p v-if="text">{{ text }}</p>
        <div class="bottom"></div>
    </div>
</template>

<script>
export default {
    props: ['title', 'text', 'title1']
}
</script>

<style lang="scss" scoped>
.title{
    text-align: center;
    width: 100%;
    color: #fff;
    padding-bottom: 50px;
    .top{
        display: inline-block;
        width: 38px;
        height: 14px;
        border: 4px solid #03d687;
        border-bottom: none;
        position: relative;
        span{
            width: 100%;
            position: absolute;
            left: 0;
            top: 6px;
            border-top: 1px solid #03d687;
        }
    }  
    h4{
        padding-top: 20px;
        font-size: 34px;
        font-weight: 600;
    }
    p{
        font-size: 20px;
        line-height: 65px;
    }
    .bottom{
        display: inline-block;
        width: 38px;
        border-top: 4px solid #03d687;
    }
} 
</style>